Vueで<meta name="description">を動的に生成して多言語対応するときのコードを重複させない技術的な話

そこでこの機能をmasterにマージするまでに考えたことや技術的なことに関して記述する。

説明を重複して定義させない技術的な話

Vue + TypeScriptを使っている。

src/main.tsで<meta name="description">を動的に変更している。

public/index.htmlには<meta name="description">はすでに挿入されている。

ここは大事でGoogleでは成功したが他の検索エンジンで対応している保証はないので静的に英語の説明を埋め込んでいる。

ただしこの説明文をハードコーディングで書いてしまうと英語の説明がコード内で重複してしまう。

そこでLodash templateというものが使える環境にあることが「HTML and Static Assets | Vue CLI」でわかり、それを使って以下のように、ビルド時に埋め込んでいる。

code:public/index.html

...

...

src/meta-description.jsonというのは他のTypeScriptでもimportできる。

それをするためにはtsconfig.jsonのcompilerOptionsに"resolveJsonModule": trueを追加すれば良い。

src/strings.tsではなくてsrc/meta-description.jsonにしたのは複数の理由がある。

注意) src/strings.tsはVue特有のものではなくPiping UIの開発で使っているnwtgck.iconが定義したもの。

JavaScriptやTypeScriptと違いJSONだとLodash templateを使っても読み込みやすい（実行する必要はなくパースするだけで良いから）。

src/strings.tsという場所で多言語対応関連を一括管理しているが言葉が増えれば大きくなりimportすると多少時間がかかる。

"resolveJsonModule": trueを使えばTypeScript側でちゃんと型が付き安心してコーディングできる。

実際の動作

Piping UIの実際の動作に関して。

English:

日本語:

上記のページをブラウザのinspectとView page sourceでサーバーから返却されたHTMLとを比較すると実際の動作が分かる。